<template>
  <div class="gallery-page">
    <!-- Header Section -->
    <section class="gallery-header" 
             :style="{ backgroundImage: `url(${require('../assets/img/subheader-4.jpg')})` }">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h1 class="page-title" data-aos="fade-up">音乐画廊</h1>
            <p class="page-subtitle" data-aos="fade-up" data-aos-delay="200">
              用视觉捕捉音乐的每一个精彩瞬间
            </p>
            <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="300">
              <ol class="breadcrumb justify-content-center">
                <li class="breadcrumb-item">
                  <router-link to="/" class="text-light">首页</router-link>
                </li>
                <li class="breadcrumb-item active text-light" aria-current="page">画廊</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>

    <!-- Filter Section -->
    <section class="filter-section py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <div class="category-tabs">
              <button 
                v-for="category in categories" 
                :key="category.id"
                class="category-btn"
                :class="{ active: selectedCategory === category.id }"
                @click="selectedCategory = category.id"
              >
                <i :class="category.icon"></i>
                {{ category.name }}
              </button>
            </div>
          </div>
          <div class="col-md-6">
            <div class="view-controls">
              <select v-model="sortBy" class="form-select me-3">
                <option value="newest">最新上传</option>
                <option value="popular">最受欢迎</option>
                <option value="name">按名称</option>
                <option value="oldest">最早上传</option>
              </select>
              <div class="view-toggle">
                <button 
                  class="view-btn"
                  :class="{ active: viewMode === 'grid' }"
                  @click="viewMode = 'grid'"
                >
                  <i class="fas fa-th"></i>
                </button>
                <button 
                  class="view-btn"
                  :class="{ active: viewMode === 'masonry' }"
                  @click="viewMode = 'masonry'"
                >
                  <i class="fas fa-th-large"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Gallery Grid -->
    <section class="gallery-grid py-5">
      <div class="container">
        <div class="gallery-container" :class="viewMode">
          <div 
            v-for="(image, index) in filteredImages" 
            :key="index"
            class="gallery-item"
            :class="image.size"
            data-aos="fade-up"
            :data-aos-delay="index * 50"
            @click="openLightbox(index)"
          >
            <div class="gallery-card glass">
              <div class="image-container">
                <img :src="image.src" :alt="image.title" class="gallery-image">
                <div class="image-overlay">
                  <div class="overlay-content">
                    <button class="zoom-btn">
                      <i class="fas fa-search-plus"></i>
                    </button>
                    <div class="image-actions mt-3">
                      <button class="action-btn" @click.stop="likeImage(image)">
                        <i class="fas fa-heart" :class="{ 'text-danger': image.isLiked }"></i>
                      </button>
                      <button class="action-btn" @click.stop="shareImage(image)">
                        <i class="fas fa-share"></i>
                      </button>
                      <button class="action-btn" @click.stop="downloadImage(image)">
                        <i class="fas fa-download"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="image-category">{{ getCategoryName(image.category) }}</div>
                <div class="image-likes">
                  <i class="fas fa-heart"></i>
                  {{ image.likes }}
                </div>
              </div>
              <div class="image-info p-3">
                <h5 class="image-title">{{ image.title }}</h5>
                <p class="image-description">{{ image.description }}</p>
                <div class="image-meta">
                  <span class="image-date">
                    <i class="fas fa-calendar me-1"></i>{{ image.date }}
                  </span>
                  <span class="image-photographer">
                    <i class="fas fa-camera me-1"></i>{{ image.photographer }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Load More Button -->
        <div class="text-center mt-5" v-if="hasMoreImages">
          <button class="btn btn-outline-primary btn-lg" @click="loadMoreImages">
            加载更多图片
            <i class="fas fa-chevron-down ms-2"></i>
          </button>
        </div>
      </div>
    </section>

    <!-- Featured Photos Section -->
    <section class="featured-photos py-5 gradient-bg">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">精选摄影</h2>
          <p class="section-subtitle text-white">最受欢迎的音乐摄影作品</p>
        </div>
        
        <div class="featured-slider" data-aos="fade-up" data-aos-delay="200">
          <div class="row">
            <div 
              v-for="(photo, index) in featuredPhotos" 
              :key="'featured-' + index"
              class="col-lg-4 col-md-6 mb-4"
            >
              <div class="featured-photo-card" @click="openLightbox(images.indexOf(photo))">
                <div class="featured-image-container">
                  <img :src="photo.src" :alt="photo.title" class="featured-image">
                  <div class="featured-overlay">
                    <div class="featured-content">
                      <h4 class="featured-title">{{ photo.title }}</h4>
                      <p class="featured-photographer">{{ photo.photographer }}</p>
                      <div class="featured-stats">
                        <span><i class="fas fa-heart me-1"></i>{{ photo.likes }}</span>
                        <span><i class="fas fa-eye me-1"></i>{{ photo.views }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Lightbox Modal -->
    <div class="modal fade" id="lightboxModal" tabindex="-1" v-if="currentImage">
      <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-dark text-white">
          <div class="modal-header border-0">
            <h5 class="modal-title">{{ currentImage.title }}</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body p-0">
            <div class="lightbox-container">
              <div class="lightbox-image-container">
                <img :src="currentImage.src" :alt="currentImage.title" class="lightbox-image">
                <button class="lightbox-prev" @click="previousImage" v-if="currentImageIndex > 0">
                  <i class="fas fa-chevron-left"></i>
                </button>
                <button class="lightbox-next" @click="nextImage" v-if="currentImageIndex < filteredImages.length - 1">
                  <i class="fas fa-chevron-right"></i>
                </button>
              </div>
              <div class="lightbox-info p-4">
                <div class="row">
                  <div class="col-md-8">
                    <h3>{{ currentImage.title }}</h3>
                    <p class="text-muted mb-3">{{ currentImage.description }}</p>
                    
                    <div class="image-details">
                      <div class="row">
                        <div class="col-sm-6">
                          <p><strong>摄影师:</strong> {{ currentImage.photographer }}</p>
                          <p><strong>拍摄日期:</strong> {{ currentImage.date }}</p>
                        </div>
                        <div class="col-sm-6">
                          <p><strong>分类:</strong> {{ getCategoryName(currentImage.category) }}</p>
                          <p><strong>分辨率:</strong> {{ currentImage.resolution || '3840x2160' }}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="lightbox-actions">
                      <div class="action-stats mb-3">
                        <div class="stat-item">
                          <button class="stat-btn" @click="likeImage(currentImage)">
                            <i class="fas fa-heart" :class="{ 'text-danger': currentImage.isLiked }"></i>
                          </button>
                          <span>{{ currentImage.likes }}</span>
                        </div>
                        <div class="stat-item">
                          <i class="fas fa-eye"></i>
                          <span>{{ currentImage.views || '1.2K' }}</span>
                        </div>
                      </div>
                      <div class="action-buttons">
                        <button class="btn btn-primary me-2 mb-2" @click="downloadImage(currentImage)">
                          <i class="fas fa-download me-1"></i>下载
                        </button>
                        <button class="btn btn-outline-light me-2 mb-2" @click="shareImage(currentImage)">
                          <i class="fas fa-share me-1"></i>分享
                        </button>
                        <button class="btn btn-outline-light mb-2" @click="addToCollection(currentImage)">
                          <i class="fas fa-plus me-1"></i>收藏
                        </button>
                      </div>
                    </div>
                    
                    <div class="related-images mt-4">
                      <h6>相关图片</h6>
                      <div class="related-grid">
                        <div 
                          v-for="(related, index) in getRelatedImages()" 
                          :key="index"
                          class="related-item"
                          @click="setCurrentImage(filteredImages.indexOf(related))"
                        >
                          <img :src="related.src" :alt="related.title" class="related-thumb">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gallery',
  data() {
    return {
      selectedCategory: 'all',
      sortBy: 'newest',
      viewMode: 'masonry',
      currentImageIndex: 0,
      currentImage: null,
      hasMoreImages: true,
      categories: [
        { id: 'all', name: '全部', icon: 'fas fa-images' },
        { id: 'concerts', name: '演唱会', icon: 'fas fa-microphone' },
        { id: 'behind-scenes', name: '幕后花絮', icon: 'fas fa-camera' },
        { id: 'portraits', name: '艺术家肖像', icon: 'fas fa-user-circle' },
        { id: 'instruments', name: '乐器', icon: 'fas fa-guitar' },
        { id: 'venues', name: '演出场地', icon: 'fas fa-building' }
      ],
      images: [
        {
          title: '星空下的演唱会',
          description: '夜空中最亮的星，照亮了整个舞台',
          src: require('../assets/img/gallery/1.jpg'),
          category: 'concerts',
          photographer: '张摄影',
          date: '2024-12-01',
          likes: 1254,
          views: '15.2K',
          isLiked: false,
          size: 'large'
        },
        {
          title: '激情摇滚现场',
          description: '摇滚乐的狂欢，青春的释放',
          src: require('../assets/img/gallery/2.jpg'),
          category: 'concerts',
          photographer: '李镜头',
          date: '2024-11-28',
          likes: 987,
          views: '8.9K',
          isLiked: true,
          size: 'medium'
        },
        {
          title: '钢琴家的专注瞬间',
          description: '音乐家在演奏时的专注神情',
          src: require('../assets/img/gallery/3.jpg'),
          category: 'portraits',
          photographer: '王光影',
          date: '2024-11-25',
          likes: 756,
          views: '6.3K',
          isLiked: false,
          size: 'small'
        },
        {
          title: '古典吉他的优雅',
          description: '经典乐器的完美展示',
          src: require('../assets/img/gallery/4.jpg'),
          category: 'instruments',
          photographer: '赵快门',
          date: '2024-11-22',
          likes: 643,
          views: '4.7K',
          isLiked: false,
          size: 'medium'
        },
        {
          title: '录音室内的创作时光',
          description: '艺术家们在录音室中的创作过程',
          src: require('../assets/img/gallery/5.jpg'),
          category: 'behind-scenes',
          photographer: '陈镜像',
          date: '2024-11-20',
          likes: 892,
          views: '12.1K',
          isLiked: true,
          size: 'large'
        },
        {
          title: '爵士酒吧的氛围',
          description: '昏暗灯光下的爵士演出',
          src: require('../assets/img/gallery/6.jpg'),
          category: 'venues',
          photographer: '刘视角',
          date: '2024-11-18',
          likes: 567,
          views: '7.8K',
          isLiked: false,
          size: 'small'
        },
        {
          title: '交响乐团排练',
          description: '大型交响乐团的精彩排练瞬间',
          src: require('../assets/img/gallery/7.jpg'),
          category: 'behind-scenes',
          photographer: '周焦点',
          date: '2024-11-15',
          likes: 1123,
          views: '18.5K',
          isLiked: false,
          size: 'large'
        },
        {
          title: '鼓手的律动',
          description: '节拍中展现的力量与美感',
          src: require('../assets/img/gallery/8.jpg'),
          category: 'portraits',
          photographer: '吴光圈',
          date: '2024-11-12',
          likes: 789,
          views: '9.6K',
          isLiked: true,
          size: 'medium'
        },
        {
          title: '小提琴的华美时刻',
          description: '弦乐器在舞台灯光下的华丽展现',
          src: require('../assets/img/gallery/9.jpg'),
          category: 'instruments',
          photographer: '郑构图',
          date: '2024-11-10',
          likes: 445,
          views: '5.2K',
          isLiked: false,
          size: 'small'
        },
        {
          title: '音乐厅的宏伟建筑',
          description: '经典音乐厅的建筑之美',
          src: require('../assets/img/gallery/10.jpg'),
          category: 'venues',
          photographer: '何透视',
          date: '2024-11-08',
          likes: 678,
          views: '11.3K',
          isLiked: false,
          size: 'medium'
        }
      ]
    }
  },
  computed: {
    filteredImages() {
      let filtered = this.images

      // Category filter
      if (this.selectedCategory !== 'all') {
        filtered = filtered.filter(image => image.category === this.selectedCategory)
      }

      // Sort
      switch (this.sortBy) {
        case 'popular':
          filtered = filtered.sort((a, b) => b.likes - a.likes)
          break
        case 'name':
          filtered = filtered.sort((a, b) => a.title.localeCompare(b.title))
          break
        case 'oldest':
          filtered = filtered.sort((a, b) => new Date(a.date) - new Date(b.date))
          break
        default: // newest
          filtered = filtered.sort((a, b) => new Date(b.date) - new Date(a.date))
      }

      return filtered
    },
    featuredPhotos() {
      return this.images.filter(image => image.likes > 800).slice(0, 3)
    }
  },
  methods: {
    getCategoryName(categoryId) {
      const category = this.categories.find(cat => cat.id === categoryId)
      return category ? category.name : '未知分类'
    },
    openLightbox(index) {
      this.currentImageIndex = index
      this.currentImage = this.filteredImages[index]
      const { Modal } = require('bootstrap')
      const modal = new Modal(document.getElementById('lightboxModal'))
      modal.show()
    },
    setCurrentImage(index) {
      this.currentImageIndex = index
      this.currentImage = this.filteredImages[index]
    },
    previousImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--
        this.currentImage = this.filteredImages[this.currentImageIndex]
      }
    },
    nextImage() {
      if (this.currentImageIndex < this.filteredImages.length - 1) {
        this.currentImageIndex++
        this.currentImage = this.filteredImages[this.currentImageIndex]
      }
    },
    likeImage(image) {
      image.isLiked = !image.isLiked
      if (image.isLiked) {
        image.likes++
      } else {
        image.likes--
      }
    },
    shareImage(image) {
      console.log('Sharing image:', image.title)
    },
    downloadImage(image) {
      console.log('Downloading image:', image.title)
    },
    addToCollection(image) {
      console.log('Added to collection:', image.title)
    },
    loadMoreImages() {
      // In a real app, load more images from API
      this.hasMoreImages = false
    },
    getRelatedImages() {
      return this.images
        .filter(img => img.category === this.currentImage.category && img !== this.currentImage)
        .slice(0, 4)
    }
  }
}
</script>

<style scoped>
/* Header Styles */
.gallery-header {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.page-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

/* Filter Section */
.filter-section {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.category-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 25px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.category-btn:hover,
.category-btn.active {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-color: transparent;
  color: white;
  transform: translateY(-2px);
}

.view-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.view-controls .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: auto;
  min-width: 150px;
}

.view-controls .form-select option {
  background: #2d2d2d;
  color: white;
}

.view-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.view-btn {
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.view-btn.active,
.view-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Gallery Grid */
.gallery-container.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.gallery-container.masonry {
  columns: 3;
  column-gap: 2rem;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 2rem;
  cursor: pointer;
}

.gallery-container.grid .gallery-item {
  margin-bottom: 0;
}

.gallery-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gallery-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.image-container {
  position: relative;
  overflow: hidden;
}

.gallery-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-card:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
}

.zoom-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  color: white;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 0 auto;
}

.zoom-btn:hover {
  transform: scale(1.1);
}

.image-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.image-category {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
}

.image-likes {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
}

.image-info {
  padding: 1.5rem;
}

.image-title {
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.image-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.image-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Featured Photos */
.featured-photo-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 300px;
  cursor: pointer;
}

.featured-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

.featured-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.featured-photographer {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.featured-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Lightbox Modal */
.lightbox-container {
  max-height: 90vh;
  overflow-y: auto;
}

.lightbox-image-container {
  position: relative;
  text-align: center;
  background: #000;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.action-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.stat-btn:hover {
  color: white;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.related-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.related-item:hover {
  transform: scale(1.05);
}

.related-thumb {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

/* Section Titles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .gallery-container.masonry {
    columns: 2;
  }
  
  .category-tabs {
    justify-content: center;
  }
  
  .view-controls {
    margin-top: 1rem;
    justify-content: center;
  }
  
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .lightbox-prev {
    left: 10px;
  }
  
  .lightbox-next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .gallery-container.masonry {
    columns: 1;
  }
}
</style>
